
<script setup>
    
    import {onMounted,watch, reactive,ref} from 'vue'
    import { ElMessage,ElMessageBox } from 'element-plus'
    import rules from '../module/verification'
    import  server  from '@/module/axios'
    import imageUpload from '@/module/imageUpload'
    import AudioUpLoad from '@/module/AudioUpLoad'
    import config from '@/module/configData'
    import {Top,Bottom,Delete} from '@element-plus/icons-vue'

    let {axioscall} = server();
    let {UpimgfileToguid} = imageUpload();
    let {ImgUrl} = config();
    let {getAudioGUid,getGUid} = AudioUpLoad();

    let GetQueryString = (name) => {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return (r[2]); return null;
    } 


    let id = GetQueryString('id') || 0;  //获取传参
    let WhetherAssociateExpertQuestions = ref(false);  //是否关联专家问答
    let courseAttributeList = [
        {name:'图文'},{name:'音频'},{name:'视频'},{name:'综合'}
    ];  //课程属性的选择

    let imageTextFlag = ref(true);  //图文按钮
    let AddAudioFlag = ref(false);   //音乐按钮
    let AddVideoFlag = ref(false);   //视频按钮
    let formData = null;
    if(sessionStorage.getItem('formData') && !id){
        formData = reactive(JSON.parse(sessionStorage.getItem('formData')))
    }else{
        formData =  reactive({
            Title:'',     //课程标题
            Attribute:'1',  //课程属性
            Intrduction:'',     //课程简介
            dateIssued:'',      //上架时间
            Sort:'',  //排序
            courseLabel:[['0',0]],     //标签
            RelateExpert:'',//所属专家
            IsRelateExpertAnswer:"N",  //是否关联至专家问答
            IsTop:'N',     //是否置顶
            ConverImg:'',  //封面图片(课程)
            DetailImg:'', //详情图片
            ClassContent:[
            ],           //课程详情
        })
    }

    /**     ClassContent
     *      type  1 图文  2音频 3视频
     *      ImgList   图文的时候传递值
     *      Courses:
     *      seriesOfCourses:[],   //系列课程   音频是传入
     *          courseTitle:  //    课程名称
     *          AudioGUID:''
     *          audioName:''   //音频名称
     *          hour:           时
     *          minute:         分
     *          second:         秒
     *      imgurl              视频封面
     *      url:                跳转地址
     *      hour                视频的时
     *      minute
     *      second
     *      videotype           视频类型
     */

    let optionsLabel = reactive([
        { value: '1', label: '宝宝年龄段', children: []},
        { value: '2', label: '知识类型', children: []},
    ]);  //标签的选择信息
    
    let SubordinateExpertList =reactive([]);    //所属专家的选择数据列表
    let showImgUrl = ref(''); //查看大图展示内容
    let clearImgs = () =>{ showImgUrl.value = '' } //关闭查看大图
    //监听事件   监听变化更新页面属性值
    watch(formData,(newvalue,oldvalue) =>{
        if(newvalue != null){
            if(!id){
                sessionStorage.setItem('formData',JSON.stringify(formData))
            }
        }
        
    })
    //页面加载完成
    let mountedss = async () =>{
        await getoptionsLabel();
        await getSubordinateExpertList();
        
        if(id){
            if(sessionStorage.getItem('formData') && JSON.parse(sessionStorage.getItem('formData')).ID){
                return
            }
            await getformDate(id);
        }
        MonitorCourseAttributeChanges();
    }
    onMounted(mountedss)

    //重置页面内容
    let resetPage = () =>{
        formData.Sort = '';
        formData.Title = '';
        formData.Attribute = '1';  //课程属性
        formData.Intrduction ='';     //课程简介
        formData.dateIssued ='';      //上架时间
        formData.courseLabel = [['0',0]];     //标签
        formData.RelateExpert='';//所属专家
        formData.IsRelateExpertAnswer="N";  //是否关联至专家问答
        formData.IsTop='N';     //是否置顶
        formData.ConverImg='';  //封面图片(课程)
        formData.DetailImg=''; //详情图片
        formData.ClassContent=[
            ];           //课程详情
        sessionStorage.removeItem('formData');
        MonitorCourseAttributeChanges();
    }
    //监听课程属性变化修改下方添加课程内的按钮
    let MonitorCourseAttributeChanges = () =>{
        imageTextFlag.value = false;
        AddAudioFlag.value = false;
        AddVideoFlag.value = false;
        WhetherAssociateExpertQuestions.value = false;
        let obj = {
            1:()=>{imageTextFlag.value = true;formData.ClassContent=delDy(1)},
            2:()=>{AddAudioFlag.value = true;formData.ClassContent=delDy(2)},
            3:() =>{AddVideoFlag.value = true;WhetherAssociateExpertQuestions.value = true;formData.ClassContent=delDy(3)},
            4:() =>{
                imageTextFlag.value = true;
                AddAudioFlag.value = true;
                AddVideoFlag.value = true;
                WhetherAssociateExpertQuestions.value = true;
            }
        }
        obj[Number(formData.Attribute)]()
    }

    //切换课程属性以后，把多余的删除
    let delDy = (type) =>{
        let arr = [];
        formData.ClassContent.forEach(item =>{
            if(item.type == type){
                arr.push(item)
            }
        })
        return arr
    }


    //添加标签
    let addCourseLabel = () =>{
        formData.courseLabel.push(['0',0])
    }
    //标签删除·
    let coursedel = (i) =>{
        if(formData.courseLabel.length == 1){
            return
        }
        formData.courseLabel.splice(i,1);
    }
    //上移
    let moveUpBtn = (i) =>{
        let data = formData.courseLabel.splice(i,1);
        formData.courseLabel.splice(i-1,0,...data);

    }
    //下移
    let moveDownBtn = (i) =>{
        let data = formData.courseLabel.splice(i,1);
        formData.courseLabel.splice(i+1,0,...data);
    }

    //获取标签列表的选择信息 SuperID = 1 宝宝年龄段  2  知识类型
    const getoptionsLabel = async () =>{
        for(let j = 1; j <= optionsLabel.length;j++){
           await axioscall('MaMClassRoomService.GetTagsList',{SuperID:j}).then(res =>{
                if(optionsLabel[j-1]){
                    for(let i = 0; i < res.length; i++){
                        optionsLabel[j-1].children.push({
                            value: res[i].ID,
                            label: res[i].Name,
                        })
                    }
                }
            })
        }
    }

    //获取所属专家信息
    let getSubordinateExpertList = () =>{
       return axioscall('MaMClassRoomService.GetExpertList',{Classify:0}).then(res =>{
            res.forEach(item =>{
                SubordinateExpertList.push({
                    value: item.ID,
                    label: item.ExpertName,
                    ...item
                });
            } )
        })
    }

    //上传封面图片（课程）
    let getcoverPicture = async () =>{
        let guid = await UpimgfileToguid('coverPictureInput');
        formData.ConverImg = ImgUrl+guid
    }

    //上传详情图
    let UpimgDetailedPicture = async () =>{
        let guidList = await UpimgfileToguid('DetailedPictureInput');
        formData.DetailImg = ImgUrl+guidList;
    }
    //删除上传图片
    let delDetailedPictureImg = (i) =>{
        formData.DetailImg='';
    }
    //删除图文图片
    let delDetailedPictureImgb = (i,num) =>{
        formData.ClassContent[num].ImgList.splice(i,1);
    }
    //查看大图
    let openImgIS = (i) =>{
        showImgUrl.value = formData.DetailImg;
    }
    let openImgISb = (i,is) =>{
        showImgUrl.value = formData.ClassContent[i].ImgList[is]
    }

    //添加图文
    let AddimageTextcon_click = (num) =>{
        switch(num){        //添加图文
            case 1:
                formData.ClassContent.push({
                    type:1,
                    typeName:'图文',
                    ImgList:[]
                })
            break;
            case 2:       //添加音频
                formData.ClassContent.push({
                    type:2,
                    typeName:'音频',
                    Courses:'',
                    seriesOfCourses:[
                        {
                            courseTitle:'', 
                            AudioGUID:'',
                            audioName:'',
                            hour:'',                   
                            minute:"",   
                            second:""  
                        }
                    ]
                })
            break;
            case 3:
                formData.ClassContent.push({
                    type:3,
                    typeName:'视频',
                    imgurl:"",
                    url:'',      
                    hour:'',         
                    minute:'',
                    second:'',
                    videotype:'1'
                })
            break;
        }
        
    }
    //上传课程详情的图文
    let UpCourseDetailsImg = async (i) =>{
        let guidList = await UpimgfileToguid('PictureUPImg'+i,true);
        for(let i = 0; i < guidList.length;i++){
            guidList[i] = ImgUrl+guidList[i]
        }
        formData.ClassContent[i].ImgList.push(...guidList)
    }

    //删除课程详情
    let delCourseDetails = (i) =>{
        formData.ClassContent.splice(i,1)
    }
    //切换课程往上移动
    let tabTopCourseDetails = (i) =>{
        let da = formData.ClassContent.splice(i,1);
        formData.ClassContent.splice(i-1,0,...da)
    }
    //切换课程内容往下移动
    let tabDownCourseDetails = (i) =>{
        let da = formData.ClassContent.splice(i,1);
        formData.ClassContent.splice(i+1,0,...da)
    }

    //添加音频的课程内容
    let AddACourseAudio = (i) => {
        formData.ClassContent[i].seriesOfCourses.push({
            courseTitle: '',
            AudioGUID: '',
            audioName: '',
            hour: '',
            minute: "",
            second: ""
        })
    }
    let schedule = ref(0);
    let tr = ref(0);
    //上传音频的控制进度方法
    let schedules = async (i,iw) =>{
        let dataList = await getAudioGUid('addAudioFile'+iw);
        // return
        // let guid = await getGUid(dataList[0]);
        tr.value = dataList.length;
        let jd = [];
        dataList.forEach(item =>{
            jd.push({
                value:item,
                flag:false
            })
        })
        let guid = '';
        for(let i =0; i <= jd.length; i++){
            schedule.value = i;
            if(jd[i]){
                guid = await getGUid(jd[i].value,guid);
            }
        }
        return guid
    }

    //上传音频
    let upAudioAll = async(i,iw) =>{
        let guid = await schedules(i,iw);
        ElMessage({
            message: '上传成功！',
            type: 'success',
        })
        formData.ClassContent[i].seriesOfCourses[iw].AudioGUID = ImgUrl+guid;
    }
    //删除音频课程
    let delseriesOfCourses = (i,iw) =>{
        formData.ClassContent[i].seriesOfCourses.splice(iw,1);
    }
    //删除音频
    let deladdAudioContent_item_audioList = (i,iw) =>{
        formData.ClassContent[i].seriesOfCourses[iw].AudioGUID = '';
    }
    //切换音频课程上下
    let AudioTabTop = (i,iw) =>{
        let ar = formData.ClassContent[i].seriesOfCourses.splice(iw,1);
        formData.ClassContent[i].seriesOfCourses.splice(iw-1,0,...ar);
    }
    let AudioTabDown = (i,iw) =>{
        let ar = formData.ClassContent[i].seriesOfCourses.splice(iw,1);
        formData.ClassContent[i].seriesOfCourses.splice(iw+1,0,...ar);
    }

    //上传视频封面
    let UpaddVideoContent_img = async (i) =>{
        let gudi = await UpimgfileToguid('addVideoContent_imgt'+i);
        formData.ClassContent[i].imgurl = ImgUrl+gudi
    }

    let alerts = (message) =>{
        ElMessage({
            message,
            type: 'warning',
        })
    }
    //保存课程验证必填
    const VerifyMandatoryFields = () =>{
        if(!formData.Title){
            alerts('还没有填写课程名称')
            return false
        }else if(!formData.Intrduction){
            alerts('还没有填写课程简介')
            return false
        }else if(!formData.dateIssued){
            alerts('还没有选择上架时间')
            return false
        }else if(!formData.RelateExpert){
            alerts('还没有选择所属专家')
            return false
        }else if(formData.courseLabel.length <= 0 ){
            alerts('还没有添加标签！')
            return false
        }else if(!formData.ConverImg){
            alerts('还没有上传封面图片(课程)')
            return false
        }else if(!formData.DetailImg){
            alerts('还没有上传详情图片!')
            return false
        }else if(formData.ClassContent.length > 0){
            for(let i = 0; i < formData.ClassContent.length; i++){
                let item  = formData.ClassContent[i];
                if(item.type == 1){
                    if(item.ImgList.length <= 0){
                        alerts(`第${i+1}个图文内容还没有上传图片！`)
                        return false
                    }
                }else if(item.type == 2){
                    if(!item.Courses){
                        alerts(`第${i+1}个音频内容还没有输入系列课程名称！`)
                        return false
                    }
                    for(let j = 0; j < item.seriesOfCourses.length; j++){
                        if(!item.seriesOfCourses[j].courseTitle){
                            alerts(`第${i}个音频内容的第${j+1}个还没输入课程名称！`)
                            return false
                        }else if(!item.seriesOfCourses[j].AudioGUID){
                            alerts(`第${i}个音频内容的第${j+1}个还没上传音频文件！`)
                            return false
                        }else if(!item.seriesOfCourses[j].hour && !item.seriesOfCourses[j].minute && !item.seriesOfCourses[j].second){
                            alerts(`第${i}个音频内容的第${j+1}个还没输入音频时长!`)
                            return false
                        }
                    }
                }else if(item.type == 3){
                    if(!item.imgurl){
                        alerts(`第${i+1}个视频内容还没上传封面图！`)
                        return false
                    }else if(!item.url){
                        alerts(`第${i+1}个视频内容还没上传跳转地址！`)
                        return false
                    }else if(!item.hour && !item.minute && !item.second){
                        alerts(`第${i+1}个视频内容还没输入视频时长！`)
                        return false
                    }
                }
            }
        }
        for(let i = 0;i < formData.courseLabel.length;i++){
            if(formData.courseLabel[i][1] == 0){
                alerts(`第${i+1}个标签还没添加！`)
                return false
            }
        }
        return true
    }
    //保存成功或者取消或调地址
    let callbackPage = () =>{
        window.location.replace('https://mall.yili.com/MaMa_Web/SubModule/MaMaClass/CR_ArticleList.aspx');
    }
    //保存
    let submitForm = async () =>{
        const submitFormflag = VerifyMandatoryFields();
        if(submitFormflag){
            let Tags = [];
            for(let i = 0; i < formData.courseLabel.length; i++){
                let item = formData.courseLabel[i];
                for(let j = 0; j < optionsLabel[Number(item[0])-1].children.length; j++){
                    let b = optionsLabel[Number(item[0])-1].children[j];
                    if(b.value == item[1]){
                        Tags.push({
                            ID:b.value,
                            name:''
                        })
                        break;
                    }
                }
            }
            let Content = [];
            for(let i = 0; i < formData.ClassContent.length; i++){
                let item = formData.ClassContent[i];
                if(item.type == 1){
                    let courses = [];
                    item.ImgList.forEach(item =>{
                        courses.push({
                            imgurl: item,
                        })
                    })
                    Content.push({
                        type:item.type,
                        name: "",
                        courses
                    })
                }else if(item.type == 2){
                    let courses = [];
                    for(let j = 0; j < item.seriesOfCourses.length; j++){
                        courses.push({
                            course_name:item.seriesOfCourses[j].courseTitle,
                            audio:item.seriesOfCourses[j].AudioGUID,
                            hour:item.seriesOfCourses[j].hour || 0,
                            minute:item.seriesOfCourses[j].minute || 0,
                            second:item.seriesOfCourses[j].second || 0,
                        })
                    }
                    Content.push({
                        type:item.type,
                        name:item.Courses,  //系列课程
                        courses
                    })
                }else if(item.type == 3){
                    Content.push({
                        type:item.type,
                        name:'',
                        courses:[{
                            imgurl: item.imgurl,
                            url: item.url,
                            hour: item.hour || 0,
                            minute: item.minute || 0,
                            second: item.second || 0,
                            videotype: Number(item.videotype)
                        }]                   
                    })
                }
            }
            let par = {
                Article:JSON.stringify({
                    ID:id || 0,
                    Title:formData.Title, //课程名称
                    Attribute:formData.Attribute, //课程属性
                    Intrduction:formData.Intrduction,//课程简介
                    BeginTime:formData.dateIssued[0],//上架时间
                    Sort:Number(formData.Sort) || 0,
                    EndTime:formData.dateIssued[1],  //结束时间
                    Tags,     //标签
                    RelateExpert:{
                        ID:formData.RelateExpert[0],
                    },  //所属专家
                    IsRelateExpertAnswer:formData.IsRelateExpertAnswer,//是否关联至专家问答
                    IsTop:formData.IsTop,   //是否置顶
                    ConverImg:formData.ConverImg, //课程封面图
                    DetailImg:formData.DetailImg,//详情图
                    Content,     //课程详情
                })
            }
            axioscall('MaMClassRoomService.ArticleDetailEdit',par).then(res =>{
                resetPage();
                ElMessage({
                    message:'保存成功！',
                    type: 'success',
                })
                callbackPage();
            })
        }
    }
    //初始化课程
    let setInit = (res) =>{
        formData.Sort = res.Sort
        formData.Title = res.Title;
        formData.Attribute = String(res.Attribute);  //课程属性
        formData.Intrduction = res.Intrduction;     //课程简介
        formData.dateIssued = [res.BeginTime.split('T')[0],res.EndTime.split('T')[0]];      //上架时间
        let obj = {};
        for(let i = 0; i < optionsLabel.length; i++){
            for(let j = 0; j < optionsLabel[i].children.length; j++){
                let item  = optionsLabel[i].children[j];
                obj[item.value] = [String(i+1),item.value]
            }
        }
        let courseLabelarr = [];
        for(let i = 0; i < res.Tags.length; i++){
            courseLabelarr.push(obj[res.Tags[i].ID])
        }
        if(res.Attribute== 4 || res.Attribute == 3){
            WhetherAssociateExpertQuestions.value = true;
        }
        formData.courseLabel = courseLabelarr;     //标签
        formData.RelateExpert=[res.RelateExpert.ID];//所属专家
        formData.IsRelateExpertAnswer=res.IsRelateExpertAnswer;  //是否关联至专家问答
        formData.IsTop=res.IsTop;     //是否置顶
        formData.ConverImg= res.ConverImg;  //封面图片(课程)
        formData.DetailImg=res.DetailImg; //详情图片
        let ClassContent = [];
        for(let i= 0; i < res.Content.length; i++){
            let item = res.Content[i];
            if(item.type == 1){
                let list = [];
                item.courses.forEach(items =>{
                    list.push(items.imgurl)
                })
                ClassContent.push({
                    type:item.type,
                    typeName:'图文',
                    ImgList:list
                })
            }else if(item.type == 2){
                let seriesOfCourses = [];
                item.courses.forEach(items =>{
                    seriesOfCourses.push({
                            courseTitle:items.course_name, 
                            AudioGUID:items.audio,
                            audioName:'',
                            hour:items.hour,                   
                            minute:items.minute,   
                            second:items.second
                    })
                })
                ClassContent.push({
                    typeName:'音频',
                    type:item.type,
                    Courses:item.name,
                    seriesOfCourses
                })
            }else if(item.type == 3){
                ClassContent.push({
                    typeName:'视频',
                    type:item.type,
                    imgurl:item.courses[0].imgurl,            
                    url:item.courses[0].url ,            
                    hour:item.courses[0].hour,            
                    minute:item.courses[0].minute,
                    second:item.courses[0].second,
                    videotype:String(item.courses[0].videotype),           
                })
            }
        }
        formData.ClassContent=ClassContent;           //课程详情
        MonitorCourseAttributeChanges();
    }
    //获取课程明细   进行修改
    let getformDate = (ID) =>{
       return axioscall('MaMClassRoomService.GetArticleDetailByID',{ID}).then(res =>{
            setInit(res);
        })
    }

</script>

<template>  
    <div class="all">
        <el-button style="margin-bottom: 30px;" @click="resetPage()">重置页面内容</el-button>
        <el-form class="demo-ruleForm" label-width="auto" :rules="rules" :model="formData" scroll-to-error="true">
            <el-form-item label="课程名称：" prop="courseTitle">
                <el-input v-model="formData.Title" placeholder="请输入课程名称" />
            </el-form-item>
            <el-form-item class="demo-ruleForm" label="课程属性：">
                <el-radio-group v-model="formData.Attribute" @change="MonitorCourseAttributeChanges()">
                    <el-radio v-for="(item,i) in courseAttributeList" :key="i" :label="String(i+1)" >{{item.name}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item class="demo-ruleForm" label="课程简介：" prop="courseAttribute">
                <el-input v-model="formData.Intrduction" type="textarea" placeholder="请输入课程简介" />
            </el-form-item>
            <el-form-item class="demo-ruleForm ruleForm_date" label="上架时间" prop="dateIssued">
                <el-date-picker v-model="formData.dateIssued" type="daterange" range-separator="To" format="YYYY/MM/DD" value-format="YYYY-MM-DD" start-placeholder="开始日期" end-placeholder="结束日期" size="default" />
            </el-form-item>
            <el-form-item class="demo-ruleForm" label="标    签：" prop="SubordinateExpert">
                <el-button type="primary" @click="addCourseLabel()" class="addLabel_btn">添加标签</el-button>
                <div class="addLabel_select_list"> 
                <div v-for="(itemse,i) in formData.courseLabel" :key="i">
                        <el-cascader placeholder="请选择标签!" v-model="formData.courseLabel[i]" :options="optionsLabel" filterable  />
                        <div class="moveUp" @click="moveUpBtn(i)" v-if="i == 0?false:true"><el-icon><Top /></el-icon></div>
                        <div class="moveUp" @click="moveDownBtn(i)" v-if="i == formData.courseLabel.length-1?false:true"><el-icon><Bottom /></el-icon></div>
                        <el-icon style="font-size: 30px;color: #f78989;" @click="coursedel(i)" v-if="formData.courseLabel.length == 1?false:true" ><CircleCloseFilled /></el-icon>
                </div>
                </div>
            </el-form-item>
            <el-form-item label="排序：">
                <el-input style="width:100px"  v-model="formData.Sort" placeholder="排序" />
            </el-form-item>
            <el-form-item class="demo-ruleForm" label="所属专家：" prop="SubordinateExpert">
                <el-cascader placeholder="请选择所属专家"  v-model="formData.RelateExpert" :options="SubordinateExpertList" filterable/>
            </el-form-item>
            <el-form-item class="demo-ruleForm" label="是否关联至专家问答：" v-if="WhetherAssociateExpertQuestions">
                <el-radio-group v-model="formData.IsRelateExpertAnswer">
                    <el-radio label="N" >否</el-radio>
                    <el-radio label="Y" >是</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item class="demo-ruleForm" label="是否置顶：">
                <el-radio-group v-model="formData.IsTop">
                    <el-radio label="N" >否</el-radio>
                    <el-radio label="Y" >是</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item class="demo-ruleForm" label="封面图片(课程)：" prop="SubordinateExpert">
                <div class="UPcover">
                    <label for="coverPictureInput" class="coverPicture">
                        <el-icon v-if="!formData.ConverImg"><Upload /></el-icon>
                        <img v-if="formData.ConverImg" :src="formData.ConverImg" />
                    </label>
                    <div>封面图片(课程)建议尺寸：330x186 像素</div>
                    <input id="coverPictureInput" name="coverPictureInput" type="file" accept="image/png,image/jpeg,image/gif,image/jpg" @change="getcoverPicture()"  />
                </div>
            </el-form-item>
            <el-form-item class="" label="详情图片：" prop="SubordinateExpert">
                <div class="ruleFormDetailedPictureUPcover">
                    <div class="DetailedPictureUPcover">
                        <label for="DetailedPictureInput" class="coverPicture">
                            <el-icon><Upload /></el-icon>
                        </label>
                        <div class="DetailedPictureItem" v-if="formData.DetailImg">
                            <img :src="formData.DetailImg" />
                            <div class="DetailedPictureItem_icon">
                                <el-icon @click="delDetailedPictureImg()"><Delete /></el-icon>
                                <el-icon @click="openImgIS()"><ZoomIn /></el-icon>
                            </div>
                        </div>
                    </div>
                    <div class="tres">建议尺寸：750x422 像素</div>
                    <input id="DetailedPictureInput" name="DetailedPictureInput" type="file" accept="image/png,image/jpeg,image/gif,image/jpg" @change="UpimgDetailedPicture()"  />
                </div>
            </el-form-item>
            <el-form-item label="课程详情" prop="SubordinateExpert"></el-form-item>
            <el-form-item class="demo-ruleForm" v-for="(item,i) in formData.ClassContent" :key="i" :label="item.typeName+'内容'+(i+1)+'：'">
                <div class="AddimageTextcon" v-if="item.type == 1">
                    <div class="contexts">
                        <div class="DetailedPictureUPcover">
                            <label :for="'PictureUPImg'+i" class="coverPicture">
                                <el-icon><Upload /></el-icon>
                            </label>
                            <div class="DetailedPictureItem" v-for="(items,is) in formData.ClassContent[i].ImgList" :key="is">
                                <img :src="items" />
                                <div class="DetailedPictureItem_icon">
                                    <el-icon @click="delDetailedPictureImgb(is,i)"><Delete /></el-icon>
                                    <el-icon @click="openImgISb(i,is)"><ZoomIn /></el-icon>
                                </div>
                            </div>
                        </div>
                        <input type="file" accept="image/png,image/jpeg,image/gif,image/jpg" class="PictureUPImg" :id="'PictureUPImg'+i" multiple :name="'PictureUPImg'+i" @change="UpCourseDetailsImg(i)" /> 
                        <div style="margin-top:20px">建议尺寸：宽度750</div>
                    </div>
                </div>
                <div class="addAudioContent" v-if="item.type == 2">
                    <div class="addAudioContent_p1">
                        <div class="addAudioContent_p1_title">系列课程：</div>
                        <el-input v-model="formData.ClassContent[i].Courses" placeholder="请输入系列课程" />
                    </div>
                    <div class="addAudioContent_list">
                        <div class="addAudioContent_itemAll" v-for="(itemw,iw) in formData.ClassContent[i].seriesOfCourses" :key="iw">
                            <div class="addAudioContent_item">
                                <div class="addAudioContent_p1">
                                    <div class="addAudioContent_p1_title">课程名称：</div>
                                    <el-input v-model="formData.ClassContent[i].seriesOfCourses[iw].courseTitle" placeholder="请输入课题名称" />
                                </div>
                                <div class="addAudioContent_p2">
                                    <label class="UPAUDIOBtn" :for="'addAudioFile'+iw">
                                        上传音频
                                    </label>
                                    <div class="addAudioContent_item_audioList" v-if="formData.ClassContent[i].seriesOfCourses[iw].AudioGUID">
                                            <audio controls>
                                                <source :src="formData.ClassContent[i].seriesOfCourses[iw].AudioGUID"  type="audio/ogg">
                                                <source :src="formData.ClassContent[i].seriesOfCourses[iw].AudioGUID"  type="audio/mpeg">
                                                您的浏览器不支持 audio 元素。
                                            </audio>
                                        <el-button type="danger" :icon="Delete" circle @click="deladdAudioContent_item_audioList(i,iw)" />
                                    </div>
                                    
                                    <input type="file" class="addAudioFile" :id="'addAudioFile'+iw" :name="'addAudioFile'+iw"  @change="upAudioAll(i,iw)" />
                                </div>
                                <div class="demo-progress" v-if="tr == schedule?false:true">
                                    <el-progress :text-inside="true" :stroke-width="20" :percentage="(100/tr)*schedule > 95?100:((100/tr)*schedule).toFixed(2)" />

                                </div>
                                <div>音频时长：</div>
                                <div class="addAudioContent_item_inputs">
                                    <el-input v-model="formData.ClassContent[i].seriesOfCourses[iw].hour" placeholder="时" /><span>时</span>
                                    <el-input v-model="formData.ClassContent[i].seriesOfCourses[iw].minute" placeholder="分" /><span>分</span>
                                    <el-input v-model="formData.ClassContent[i].seriesOfCourses[iw].second" placeholder="秒" /><span>秒</span>
                                </div>
                            </div>
                            <div class="addAudioContent_itemAll_btns">
                                <el-button type="danger" :icon="Delete" circle @click="delseriesOfCourses(i,iw)" />
                                <el-button v-if="iw == 0?false:true"  :icon="Top" circle @click="AudioTabTop(i,iw)" />
                                <el-button v-if="iw == formData.ClassContent[i].seriesOfCourses.length-1?false:true"  :icon="Bottom" circle @click="AudioTabDown(i,iw)" />
                            </div>
                        </div>
                    </div>
                    <el-button type="primary" @click="AddACourseAudio(i)">添加课程</el-button>
                </div>
                <div class="addVideoContent" v-if="item.type == 3">
                    <div class="addVideoContent_title">
                        <div class="addVideoContent_title_p1">视频封面：</div>
                        <div class="addVideoContent_img_p2">
                            <label :for="'addVideoContent_imgt'+i" class="addVideoContent_label">
                                <el-icon v-if="!formData.ClassContent[i].imgurl"><Upload /></el-icon>
                                <img v-if="formData.ClassContent[i].imgurl" :src="formData.ClassContent[i].imgurl" />
                            </label>
                            <input type="file" :name="'addVideoContent_imgt'+i" class="addVideoContent_imgt" :id="'addVideoContent_imgt'+i" accept="image/png,image/jpeg,image/gif,image/jpg" @change="UpaddVideoContent_img(i)"  />
                            <div>建议尺寸：670*1192 像素</div>
                        </div>
                    </div>
                    <div>
                        <div>跳转地址：</div>
                        <el-input v-model="formData.ClassContent[i].url" placeholder="输入视频的跳转地址！" />
                    </div>
                    <div>
                        <div>视频长度：</div>
                        <div class="addAudioContent_item_inputs">
                            <el-input v-model="formData.ClassContent[i].hour" placeholder="时" /><span>时</span>
                            <el-input v-model="formData.ClassContent[i].minute" placeholder="分" /><span>分</span>
                            <el-input v-model="formData.ClassContent[i].second" placeholder="秒" /><span>秒</span>
                        </div>
                    </div>
                    <div>
                        <div>视频类型：</div>
                        <div>
                            <el-radio-group v-model="formData.ClassContent[i].videotype" class="ml-4">
                                <el-radio label="1" size="large">竖版视频</el-radio>
                                <el-radio label="2" size="large">横版视频</el-radio>
                            </el-radio-group>
                        </div>
                    </div>
                </div>
                <div class="AddimageTextcon_btns">
                    <el-button type="primary" @click="delCourseDetails(i)">删除{{item.typeName }}</el-button>
                    <div>
                        <el-button v-if="i == 0?false:true" :icon="Top" circle @click="tabTopCourseDetails(i)" />
                        <el-button v-if="i == formData.ClassContent.length-1?false:true"  :icon="Bottom" circle @click="tabDownCourseDetails(i)" />
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="AddFeatureList">
                    <el-button type="primary" v-if="imageTextFlag" @click="AddimageTextcon_click(1)">添加图文</el-button>
                    <el-button type="primary" v-if="AddAudioFlag" @click="AddimageTextcon_click(2)">添加音频</el-button>
                    <el-button type="primary" v-if="AddVideoFlag" @click="AddimageTextcon_click(3)">添加视频</el-button>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="SaveCancel">
                    <el-button type="primary" @click="submitForm()">保  存</el-button>
                    <el-button @click="callbackPage()">取  消</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
    <div class="ShowImgs" v-if="showImgUrl">
        <el-icon @click="clearImgs()"><CloseBold /></el-icon>
        <img :src="showImgUrl" />
    </div>
</template>

<style scoped>
    .demo-progress .el-progress--line {
        margin-bottom: 15px;
        width: 150px;
    }
    .all{
        width: 100%;
        height: 100%;
        padding: 20px;
        margin-bottom: 50px;
    }
    .ShowImgs{
        font-size: 40px;
        color: #fff;
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content:center;
        flex-direction: column;
        background: rgba(0,0,0,0.5);
        padding-top: 100px;
    }
    .ShowImgs i{
        position: absolute;
        top: 80px;
        left: 80px;
    }
    .ShowImgs img{
        max-height: 70%;
        max-width: 70%;
        margin-top: 40px;
    }
    .ruleForm_date{
        width: 500px;
    }
    .addLabel_btn{
        margin: 0 20px;
    }
    .addLabel_select_list{
        display: flex;
        flex-direction: column;
    }
    .addLabel_select_list>div{
        margin: 15px 0;
        display: flex;
        width: 340px;
        justify-content: space-between;
        align-items: center;
    }
    .moveUp{
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid #e1e1e1;
    }
    .moveUp:hover{
        border: 1px solid #409eff;
        color: #409eff;
    }
    .UPcover{
        width: 300px;
        display: flex;
        flex-direction: column;
    }
    .UPcover i{
        font-size: 30px;
        color: #a1a1a1;
    }
    .coverPicture{
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height:150px;
        font-size: 30px;
        color: #a1a1a1;
        margin-right: 15px;
        border: 1px dashed #e1e1e1 !important;
    }
    .coverPicture:hover{
        color: #409eff;
        border: 1px dashed #409eff !important;
    }
    /* .ruleFormDetailedPictureUPcover{
        flex-direction: c;
    } */
    #coverPictureInput{
        opacity: 0;
        position: relative;
        z-index: -1;
    }
    .coverPicture img{
        width: 100%;
    }
    .DetailedPictureUPcover{
        display: flex;
        flex-wrap: wrap;
    }
    .DetailedPictureItem{
        margin-right: 15px;
        width: 150px;
        height:150px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        margin-bottom: 15px;
        border: 1px solid #e1e1e1 !important;
    }

    .DetailedPictureItem img{
        width: 100%;
    }
    .DetailedPictureItem_icon{
        opacity: 0;
        animation: 0.3s;
        width: 150px;
        height:150px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 25px;
        background: rgba(0,0,0,0.3);
    }
    .DetailedPictureItem_icon:hover{
        opacity: 1;
    }
    #DetailedPictureInput{
        opacity: 0;
        position: relative;
        z-index: -1;
    }
    #tres{
        display:block;
    }
    .AddFeatureList{
        margin-top: 15px;
    }
    .SaveCancel{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 40px;
    }
    .contexts{
        padding: 20px;
        border: 1px solid #a1a1a1;
        width: 600px;
        margin-right: 30px;
    }
    .contexts_label{
        width: 150px;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        color: #a1a1a1;
        border: 1px dashed #e1e1e1;
    }
    .PictureUPImg{
        width: 10px;
        height: 10px;
        opacity: 0;
        z-index: -1;
        position: relative;
    }
    .AddimageTextcon_btns>div{
        margin-top: 30px;
    }
    .addAudioContent{
        padding: 20px;
        border: 1px solid #a1a1a1;
        width: 600px;
        margin-right: 30px;
    }
    .addAudioContent_p1{
        display: flex;
    }
    .addAudioContent_p2{
        display: flex;
        height: 80px;
        align-items: center;
    }
    .addAudioContent_p1_title{
        width: 100px;
    }
    .addAudioContent_list{
        width: 100%;
        margin: 15px 0;
    }
    .addAudioContent_itemAll{
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

    .addAudioContent_item{
        width: 94%;
        padding: 3%;
        border: 1px solid #e1e1e1;
        margin: 10px 0;
    }   
    .addAudioContent_itemAll_btns{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 50px;
        height: 100%;
    }
    .addAudioContent_itemAll_btns>button{
        margin: 10px 0;
    }
    .addAudioContent_item_inputs{
        display: flex;
        justify-content: space-around;
    }
    .addAudioContent_item_inputs div{
        width: 120px;
    }
    .addAudioFile{
        position: relative;
        z-index: -1;
        opacity: 0;
        width: 50px;
    }
    .UPAUDIOBtn{
        width: 90px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        border-radius: 6px;
        color: #fff;
        background: #409eff;
        margin-right: 20px;
    }
    .addVideoContent{
        padding: 20px;
        border: 1px solid #a1a1a1;
        width: 600px;
        margin-right: 30px;
    }
    .addAudioContent_item_audioList{
        display: flex;
    }
    .addAudioContent_item_audioList audio{
        margin-right: 30px;
    }

    .addVideoContent_label{
        display: flex;
        width: 150px;
        height: 150px;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        color: #a1a1a1;
        border: 1px dashed #e1e1e1;
        overflow: hidden;
    }
    .addVideoContent_label img{
        width: 100%;
    }
    .addVideoContent_img_p2{
        display: flex;
        align-items: center;
    }
    .addVideoContent_imgt{
        width: 100px;
        position: relative;
        z-index: -1;
        opacity: 0;
    }
</style>
